<template>
  <header class="header">
    <div class="logo">
      <span>
        <img src="../assets/haoweilaiheader.png" alt="logo">
      </span>
    </div>
    <div class="text">欢迎来到好未来~build a beautiful feature</div>
    <nav class="nav">
      <ul class="menu">
        <li><a href="#" @click="pushHomePage">首页</a></li>
        <li><a href="#" @click="pushSearch">搜索</a></li>
        <li><a href="#" @click="exitlogin">退出</a></li>
      </ul>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header_nav',
  data() {
    return {
      showDropdown: false,
    };
  },
  methods:
  {
    pushSearch()
    {
      // console.log(1);
      this.$router.push({ name: 'SearchPage' });
    },
    pushHomePage()
    {
      this.$router.push({ name:'HomePage'})
    },
    exitlogin()
    {
      this.$router.push({ name: 'RegisterAndLogin' })
    }
  }
};
</script>

<style scoped>
/* Header 的样式 */
.header {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  display: flex;
  border-radius: 8px; /* 为header添加圆角 */
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo img {
  height: 40px; /* 调整 logo 大小 */
}

.logo span {
  margin-left: 10px;
  font-size: 1.5em; /* 增大标题文字大小 */
}

.text{
  font-size: 28px;
  font-weight: bold; /* 使字体变粗 */
  text-align: center; /* 水平居中文本 */
  width: 100%; /* 占满容器宽度 */
  line-height: 50px; /* 根据高度调整这个值，使文本垂直居中 */
  flex-grow: 1; /* 使 logo 占据可用空间 */
  white-space: nowrap; /* 防止文本换行 */
}
/* 菜单样式 */
.menu {
  list-style-type: none; /* 移除列表项的默认标记 */
  margin: 0; /* 移除外边距 */
  padding: 0; /* 移除内边距 */
  display: flex; /* 使用Flexbox布局 */
  text-align: center;
  align-items: center; /* 垂直居中对齐 */
}

/* 列表项样式 */
.menu li {
  margin-right: 20px; /* 列表项之间的间距 */
  position: relative; /* 为下拉菜单设置定位上下文 */
  transition: background-color 0.3s; /* 列表项悬停效果 */
  background: #42b983;
}

/* 链接样式 */
.menu li a {
  text-decoration: none; /* 移除下划线 */
  color: #ffffff; /* 文字颜色 */
  padding: 8px 5px; /* 内边距 */
  font-size: 25px;
  display: block; /* 将链接设置为块级元素 */
  transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
  white-space: nowrap; /* 防止文本换行 */
}

.menu li a:hover {
  background-color: rgba(255, 255, 255, 0.2); /* 鼠标悬停时的背景颜色 */
}

</style>